<template>
	<view class="main" style="height: 100vh">
		<!-- <image src="http://113.142.144.25:9301/statics/appimg/login_bg_new.png" style="position: fixed;top:0;left:0;height: 100vh;width:100vw;z-index:-1;"></image> -->
		<view class="login">
			<view class="uni-common-mt">
				<view class="uni-form-item uni-column" style="margin: 0 auto">
					<view style="width: 60%; margin: 0 auto">
						<image src="http://113.142.144.25:9301/statics/appimg/images/icon_province.png" style="margin-right: 60rpx; height: 200rpx; width: 350rpx"></image>
					</view>
					<view style="margin-left: 20rpx">
						<view class="login_label" style="color: darkgoldenrod">
							<text>陕西政务服务平台账号登录</text>
						</view>
					</view>
				</view>

				<view style="width: 70%; margin: 30rpx auto">
					<radio-group @change="radioChange">
						<radio checked="true" value="10">个人登录</radio>
						<radio value="20">法人登录</radio>
					</radio-group>
				</view>

				<swiper class="ct_tab"  v-show="loginForm.type==='10'">
					<swiper-item :class="{ ct_active: index == tabCur }" v-for="(item, index) in tabList" :key="index" class="ct_item" @click="clickCtTab(index)">
						<text v-text="item.title"></text>
					</swiper-item>
				</swiper>

				<!-- 内容信息 -->
				<view v-if="tabCur === 0">
					<view class="login_from_input">
						<view class="form-left">手机号</view>
						<view class="login_from_fun"><input type="number" maxlength="11" v-model="loginForm.mobile" placeholder="请输入手机号" /></view>
					</view>
					<view class="login_from_input">
						<view class="form-left">验证码</view>
						<view class="login_from_fun">
							<input type="number" style="width: 55%; text-align: left" maxlength="6" placeholder="验证码" v-model="loginForm.validateCode" />
							<label class="regFrom_tom_yzlabel" :style="{ color: QzyzmStare ? '#cccccc' : '#2ebbfe' }" @click="Qzyzm">{{ Qztime }}{{ Qztext }}</label>
						</view>
					</view>
					<view class="uni-form-item uni-column">
						<view>
							<button @click="bindLogin()">登录</button>
						</view>
					</view>
				</view>
				<view v-if="tabCur === 1">
					<view class="login_from_input">
						<view class="form-left">账号</view>
						<view class="login_from_fun"><input v-model="loginForm.loginNo" placeholder="请输入您的账号" /></view>
					</view>
					<view class="login_from_input">
						<view class="form-left">密码</view>
						<view class="login_from_fun"><input v-model="loginForm.password" placeholder="请输入您的密码" password="true" /></view>
					</view>
					<view class="uni-form-item uni-column">
						<view>
							<button @click="bindLogin()">登录</button>
						</view>
					</view>
				</view>
			</view>
			<view>
				<text style="float: right; color: blue" @click="visitWithoutLogin()">游客模式访问</text>
			</view>
		</view>
	</view>
</template>

<script>
import * as user from '@/api/login.js';
import * as register from '@/api/register.js';

import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			loading: false,
			loginForm: {
				loginNo: '',
				password: '',
				rememberMe: '1',
				mobile: '',
				validateCode: '',
				type: '10'
			},
			infoRes: {},
			showMask: false,
			Qztime: '',
			QzyzmStare: false,
			Qztext: '点击获取',
			authCode: '',
			oldMobile: '',
			newMobile: '',
			oldPassword: '',
			newPassword: '',
			newRepeatPassword: '',
			tabCur: 0,
			tabList: [
				{
					title: '手机号登录'
				},
				{
					title: '账号密码登录'
				}
			]
		};
	},
	onShow() {
		if (this.isAuthorization) {
			uni.navigateTo({
				url: '/pages/welcome/welcome'
			});
		}
	},
	methods: {
		clickCtTab(ctCur) {
			this.tabCur = ctCur;
			console.log('点击了--->' + this.tabCur);
		},
		bindLogin() {
			this.loading = true;
			let name = this.loginForm.username,
				password = this.loginForm.password;

			if (this.tabCur == 0 && this.loginForm.mobile == '') {
				this.loading = false;
				uni.showModal({
					content: '手机号不能为空',
					showCancel: false
				});
				return;
			}

			if (this.tabCur == 0 && this.loginForm.validateCode == '') {
				this.loading = false;
				uni.showModal({
					content: '验证码不能为空',
					showCancel: false
				});
				return;
			}

			if (this.tabCur == 1 && this.loginForm.username == '') {
				this.loading = false;
				uni.showModal({
					content: '用户名不能为空',
					showCancel: false
				});
				return;
			}

			if (this.tabCur == 1 && this.loginForm.password == '') {
				this.loading = false;
				uni.showModal({
					content: '密码不能为空',
					showCancel: false
				});
				return;
			}
			if (this.tabCur === 0) {
				user.loginProvinceCode(this.loginForm).then((res) => {
					if (res.code == '200') {
						console.log(res.data);
						uni.setStorage({
							key: 'userInfo',
							data: res.data
						});
						uni.showToast({
							icon: 'success',
							title: '登陆成功！'
						});
						uni.navigateBack();
					} else {
					}
				});
			} else {
				user.loginProvince(this.loginForm).then((res) => {
					if (res.code == '200') {
						console.log(res.data);
						uni.setStorage({
							key: 'userInfo',
							data: res.data
						});
						uni.showToast({
							icon: 'success',
							title: '登陆成功！'
						});
						uni.navigateBack();
					} else {
					}
				});
			}
		},
		...mapMutations(['login']),
		register() {
			uni.navigateTo({
				url: '/subpages/pages/register/register?type=' + '1'
			});
		},
		/**
		 *
		 * 获取用户信息
		 */
		login_weixin() {
			let that = this;
			// 展示加载框
			uni.showLoading({
				title: '加载中'
			});
			uni.getUserProfile({
				desc: '登录后可同步数据',
				success: async (obj) => {
					// this.userInfo = obj.userInfo;
					// 调用 action ，请求登录接口
					uni.login({
						provider: 'weixin',
						success: async (res) => {
							this.code = res.code;
							console.log(this.code);
							if (res.errMsg == 'login:ok') {
								//通过openId获取用户信息
								user.loginWithWX(this.code).then((res) => {
									console.log(res);
									uni.getUserInfo().then((infoRes) => {
										console.log(infoRes);
										uni.setStorage({
											key: 'openId',
											data: res.data.openid
										});
									});

									console.log(uni.getStorageSync('openId'));
									if (res.data.errcode == '10004') {
										uni.showToast({
											icon: 'error',
											title: '暂未查询到用户'
										});
										uni.navigateTo({
											url: '/subpages/pages/register/register?type=' + '2'
										});
									} else {
										console.log('userIOnfo' + res.data);
										uni.setStorage({
											key: 'userInfo',
											data: res.data
										});
										uni.switchTab({
											url: '/pages/userCenter/userCenter'
										});
									}
								});
							}
						}
					});
				},
				fail: () => {
					uni.showToast({
						title: '授权已取消',
						icon: 'error',
						mask: true
					});
				},
				complete: () => {
					// 隐藏loading
					uni.hideLoading();
				}
			});
		},
		toggle() {
			this.showMask = true;
		},
		closePopup() {
			this.showMask = false;
		},
		Qzyzm() {
			register.getCodeProvince({ mobile: this.loginForm.mobile, type: '22' }).then((res) => {
				// if(res.data.code == '200'){
				uni.showToast({
					icon: 'none',
					title: '验证码已发送！'
				});
				// }
				// else if(res.data.code == '500'){
				// 	clearInterval(interval)
				// 	this.Qztext = '点击获取'
				// 	this.Qztime = ''
				// 	this.QzyzmStare = false
				// }else{
				// uni.showToast({
				// 	icon:'none',
				// 	title:'请稍后再试！'
				// })
				// }
			});
			var num = 60;
			if (this.QzyzmStare == false) {
				this.Qztime = '60';
				this.Qztext = 's后获取';
				this.QzyzmStare = true;
				var interval = setInterval(() => {
					--this.Qztime;
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					this.Qztext = '点击获取';
					this.Qztime = '';
					this.QzyzmStare = false;
				}, 60000);
			}
		},
		changePassword() {
			if (this.newPassword == this.newRepeatPassword) {
				if (this.authCode != '') {
					user
						.updatePassword({
							mobile: this.oldMobile,
							password: this.newPassword,
							verificationCode: this.authCode
							// username:this.userInfo.username
						})
						.then((res) => {
							if (res.code == 200) {
								this.showMask = false;
							}
							uni.showToast({
								icon: 'none',
								title: '密码重置成功，请用新密码登录！'
							});
						});
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码！'
					});
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: '两次输入密码不一致，请确认！'
				});
			}
		},
		visitWithoutLogin() {
			uni.switchTab({
				url: '/pages/home/home'
			});
		},
		radioChange(e) {
			console.log(e);
			this.loginForm.type = e.detail.value;
			if(this.loginForm.type==='20'){
				this.tabCur = 1
			}else{
				this.tabCur = 0
			}
		}
	}
};
</script>

<style lang="scss">
.login {
	padding: 20rpx 40rpx;
	margin: 100rpx 40rpx;
	text-align: left;
	border-radius: 15px;

	.login_label {
		color: #fff;
		margin: 0 auto;
		font-size: 40rpx;
		letter-spacing: 10rpx;
	}

	.uni-input {
		background-color: #f0f0f0;
		// border: 0.2rpx solid darkgray;
		height: 80rpx;
		text-align: left;
		padding-left: 40rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	.uni-form-item {
		margin: 40rpx 0;
		border-radius: 50px;
	}

	button {
		font-size: 30rpx;
		color: #fff;
		background-color: #2b77fb;
		border-radius: 50rpx;
		margin-top: 80rpx;
	}

	/deep/ button:active {
		background-color: #2368df;
	}
}

.devideline {
	float: left;
	height: 0.3rpx;
	width: 100%;
	background-color: #eeeeee;
	margin-top: 25rpx;
	margin-bottom: 15rpx;
}

.login_weixin {
	height: 45rpx;
	width: 45rpx;
	float: right;
}

.maskClass {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.login_from {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 20upx 8%;
}

.login_from_input {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px #eee solid;
	padding: 40upx 0px;
	margin: 0px auto;
}
.login_from_name {
	width: 30%;
}
.login_from_fun {
	width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.login_from_fun input {
	width: 100%;
	text-align: left;
	font-size: 14px;
}

.submit_view {
	height: 90rpx;
}

.submit_view .submit {
	background-color: #016fb8;
	height: 70rpx;
	width: 40%;
	font-size: 28rpx;
	margin-top: 20rpx;
	float: left;
}
.submit_view .canncle {
	background-color: darkgray;
	height: 70rpx;
	width: 40%;
	font-size: 28rpx;
	margin-top: 20rpx;
	float: right;
}

.ct_tab {
	width: 698upx;
	height: 100rpx;
	margin: 0 auto;
	padding: 30upx 0;
	font-size: 26upx;
	font-weight: bold;
	color: #c0c8d0;
	white-space: nowrap;
	display: flex;
	overflow: hidden;
	margin-left: 20%;
}
.ct_item {
	width: 150upx;
	padding: 30upx 0;
	display: inline-block;
}
.ct_item text {
	padding: 30upx 0;
}
.ct_active {
	color: #007aff;
}
.ct_active text {
	border-bottom: 2px solid #007aff;
}
swiper {
	width: 100%;
}

swiper-item {
	width: 180upx !important;
}
</style>
